<template>
  <div>
      <div style="width: 100%;margin-bottom: 5px">
          <div style="display: flex;justify-content: space-between">
              <div>
                  <el-input v-model="search_text"
                            :disabled="showAdvanceSearchVisible"
                            @keydown.enter.native="initHomeRemedy"
                            size="small"
                            style="width: 300px;margin-right: 10px"
                            prefix-icon="el-icon-search"
                            clearable
                            @clear="initHomeRemedy"
                            placeholder="请输入丹方名/宗门名称/炼丹阁名称/内容/简介进行搜索。。。"></el-input>
                  <el-button icon="el-icon-search" :disabled="showAdvanceSearchVisible" type="primary" size="small" @click="initHomeRemedy">搜索</el-button>
              </div>
              <div>
                  <el-button type="primary" size="small" icon="el-icon-plus" @click="showAddHomeRemedyView">添加丹方</el-button>
              </div>
          </div>
      </div>
      <div>
          <el-table
                  :data="homeRemedies"
                  stripe
                  border
                  size="small"
                  style="width: 100%;"
                  @selection-change="handleSelectionChange">
              <el-table-column
                      type="selection"
                      min-width="5%">
              </el-table-column>
              <el-table-column
                      prop="seq_no"
                      label="序号"
                      align="center"
                      min-width="6%">
              </el-table-column>
              <el-table-column
                      prop="name"
                      label="丹方"
                      min-width="8%">
              </el-table-column>
              <el-table-column
                      prop="home_remedy_rank_name"
                      label="丹方等级"
                      min-width="8%">
              </el-table-column>
              <el-table-column
                      prop="sect_name"
                      label="所属门派"
                      min-width="8%">
              </el-table-column>
              <el-table-column
                      prop="alchemy_attic_name"
                      label="炼丹阁"
                      min-width="8%">
              </el-table-column>
              <el-table-column
                      prop="brief_introduction"
                      label="简介"
                      min-width="18%">
              </el-table-column>
              <el-table-column
                      prop="content"
                      label="丹方内容"
                      min-width="18%">
              </el-table-column>
              <el-table-column
                      prop="createdate"
                      label="创建时间"
                      min-width="12%">
              </el-table-column>

              <el-table-column
                  min-width="10%"
                      prop="isDelete"
                      label="操作">
                  <template slot-scope="scope">
                      <div style="display: flex;justify-content: space-around;width: 100%;">
                          <div>
                              <el-button  size="small" type="success" @click="updateHandler(scope.row)">编辑</el-button>
                          </div>
                          <div>
                              <el-button  size="small" type="danger" @click="deleteHandler(scope.row)">删除</el-button>
                          </div>
                      </div>
                  </template>
              </el-table-column>
          </el-table>
          <div style="display: flex;justify-content: space-between;width: 100%;margin-top: 5px" >
              <div>
                  <el-button size="small" type="danger"
                             :disabled="this.multipleSelection.length===0"
                             @click="deleteMany"
                  >批量删除</el-button>
              </div>
              <el-dialog
                  :title="title"
                  :visible.sync="dialogVisible"
                  width="30%"
              >
                  <table>
                      <tr>
                          <td>
                              <el-tag>丹方名称</el-tag>
                          </td>
                          <td>
                              <el-input v-model="homeRemedy.name" style="margin-left: 6px" size="small" placeholder="请输入丹方名称"></el-input>
                          </td>
                      </tr>
                      <tr>
                          <td>
                              <el-tag>丹方等级</el-tag>
                          </td>
                          <td>
                              <el-select size="small" v-model="homeRemedy.home_remedy_rank" placeholder="丹方等级" style="margin-left: 8px;margin-right: 8px">
                                  <el-option
                                      v-for="item in homeRemedyRank"
                                      :key="item.id"
                                      :label="item.zh_name"
                                      :value="item.code">
                                  </el-option>
                              </el-select>
                          </td>
                      </tr>
                      <tr>
                          <td>
                              <el-tag>简介</el-tag>
                          </td>
                          <td>
                              <el-input
                                  type="textarea"
                                  :autosize="{ minRows: 2, maxRows: 4}"
                                  placeholder="请输入丹方简介"
                                  v-model="homeRemedy.brief_introduction">
                              </el-input>
                          </td>
                      </tr>
                      <tr>
                          <td>
                              <el-tag>丹方内容</el-tag>
                          </td>
                          <td>
                                <el-input
                                  type="textarea"
                                  :autosize="{ minRows: 2, maxRows: 4}"
                                  placeholder="请输入丹方内容(所需材料用,分开)"
                                  v-model="homeRemedy.content">
                              </el-input>
                          </td>
                      </tr>
                      <tr>
                          <td>
                              <el-tag>创建日期</el-tag>
                          </td>
                          <td>
                              <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="homeRemedy.createdate" style="width: 100%;"></el-date-picker>
                          </td>
                      </tr>
                  </table>
                  <span slot="footer" class="dialog-footer">
                        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                        <el-button size="small" type="primary" @click="doAddorUpdate">确 定</el-button>
                  </span>
              </el-dialog>
              <div>
                  <el-pagination
                          background
                          @current-change="currentChange"
                          @size-change="sizeChange"
                          layout="sizes,prev, pager, next, jumper, ->, total"
                          :total="total">
                  </el-pagination>
              </div>
          </div>
      </div>
  </div>
</template>
<script >
export default {
    name:"HomeRemedy",
    data(){
        return {
            sect_id:JSON.parse(window.sessionStorage.getItem("userInfo")).sect_id,
            alchemy_attic_id:"1",
            showAdvanceSearchVisible:false,
            homeRemedies:[],
            homeRemedyRank:[],
            homeRemedy:{
                id:"",
                name:"",
                home_remedy_rank:"",
                sect_id:"",
                sect_name:"",
                alchemy_attic_id:"",
                alchemy_attic_name:"",
                brief_introduction:"",
                content:"",
              createdate:"",
            },
            search_text:"",
            total:0,
            size:10,
            currentPage:1,
            dialogVisible:false,
            multipleSelection:[],
            title:"",
        }
    },
    methods:{
        //初始化丹方
        initHomeRemedy() {
            this.$getRequest("/sys/home_remedy/query?"+"sect_id="+this.sect_id+"&alchemy_attic_id="+this.alchemy_attic_id).then(resp=>{
                if (resp){
                    this.homeRemedies = resp.data;
                    this.total = resp.total;
                }
            })
        },
        //初始化丹方等级
        initHomeRemedyRank(){
            this.$getRequest("/system/constant/type?type=home_remedy_rank").then(resp=>{
                if (resp){
                    this.homeRemedyRank = resp;
                }
            })
        },
        //每页条数事件
        sizeChange(size){
            this.size = size;
            this.initHomeRemedy();
        },
        //当前页事件
        currentChange(currentPage){
            this.currentPage = currentPage;
            this.initHomeRemedy();
        },
        //多选
        handleSelectionChange(val){
            this.multipleSelection = val;
        },
        //打开编辑窗口
        updateHandler(){
          this.dialogVisible = true;
        },
        //丹方删除
        deleteHandler(data){
            this.$confirm('此操作将永久删除['+data.name+']该丹方, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$deleteRequest("/sys/home_remedy/"+data.id).then(resp=>{
                    if(resp){
                        this.initHomeRemedy();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //丹方批量删除
        deleteMany(){
            this.$confirm('此操作将永久删除['+this.multipleSelection.length+']个丹方, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let ids = "?";
                this.multipleSelection.forEach(item=>{
                    ids+= "ids=" + item.id + "&";
                });
                ids = ids.substring(0,ids.length-1);
                this.$deleteRequest("/sys/home_remedy/"+ids).then(resp=>{
                    if(resp){
                        this.initHomeRemedy();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //添加or编辑
        doAddorUpdate() {
            if (this.homeRemedy.id === '') {
                this.$postRequest("/sys/home_remedy/", this.homeRemedy).then(resp => {
                    if (resp) {
                        this.dialogVisible = false;
                        this.initHomeRemedy();
                        this.homeRemedy = {
                            id:"",
                            name:"",
                            home_remedy_rank:"",
                            sect_id:"",
                            sect_name:"",
                            alchemy_attic_id:"",
                            alchemy_attic_name:"",
                            brief_introduction:"",
                            content:"",
                          createdate:"",
                        }
                    }
                });
            } else {
                this.$putRequest("/sys/home_remedy/update", this.homeRemedy).then(resp => {
                    if (resp) {
                        this.dialogVisible = false;
                        this.initHomeRemedy();
                        this.homeRemedy = {
                            seq_no: '',
                            id:"",
                            name:"",
                            home_remedy_rank:"",
                            sect_id:"",
                            sect_name:"",
                            alchemy_attic_id:"",
                            alchemy_attic_name:"",
                            brief_introduction:"",
                            content:"",
                          createdate:"",
                        }
                    }
                })
            }
        },
        //打开add弹窗
        showAddHomeRemedyView(){
            this.homeRemedy = {
               id:"",
                name:"",
                home_remedy_rank:"",
                sect_id:"",
                sect_name:"",
                alchemy_attic_id:"",
                alchemy_attic_name:"",
                brief_introduction:"",
                content:"",
            }
            this.dialogVisible = true
            this.title ='添加丹方'
        },
    },
    mounted() {
        this.initHomeRemedy();
        this.initHomeRemedyRank();
    }
}
</script>
<style scoped>

</style>
